<template>
	<view class="aside">
		<view :class="isAnim ? 'left' + ' ' + 'anim' : 'left'">
			<image
				@click="toIndex"
				src="../static/images/indexW.png"
				mode=""
			></image>

			<image
				@click="toShoppCart"
				src="../static/images/shoppingCartW.png"
				mode=""
			></image>

			<image @click="toMy" src="../static/images/myW.png" mode=""></image>
		</view>
		<view class="circle" @click="changeAnim">
			<image src="../static/images/close.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isAnim: false
		};
	},
	methods: {
		changeAnim() {
			this.isAnim = !this.isAnim;
			console.log(this.isAnim);
		},
		toIndex() {
			uni.switchTab({url: "/pages/index/index"});
		},
		toShoppCart() {
			uni.switchTab({url: "/pages/shoppingCart/shoppingCart"});
		},
		toMy() {
			uni.switchTab({url: "/pages/my/my"});
		}
	},
	created() {}
};
</script>

<style lang="scss" scoped>
.anim {
	right: 12vw !important;
	transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.aside {
	display: flex;
	align-items: center;
	z-index: 99999;
	.circle {
		transform: rotate(90deg) translateY(-90vw);
		image {
			cursor: pointer;
			width: 40px;
			height: 40px;
		}
		position: fixed;
		top: 70vh;
		margin: 0 -2vw;
	}
	.left {
		display: flex;
		background-color: #f44939;
		padding: 3px 5px;
		border-radius: 35px;
		position: absolute;
		top: 70vh;
		right: -50vw;
		transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
		image {
			padding: 5px 10px;
			cursor: pointer;
			width: 25px;
			height: 25px;
		}
	}
}
</style>
